<template>
  <view :style="themeColor">
    <view class="page">
      <view class="flex benben-position-layout flex flex-wrap align-center openingDetails_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub openingDetails_fd0_0'>
          <view class='flex flex-wrap align-center openingDetails_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
            data-url="1">
            <text class='fu-iconfont2  openingDetails_fd0_0_c0_c0'>&#xE794;</text>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <text class='openingDetails_fd0_0_c1_c0'>立即开通</text>
          </view>
          <view class='flex flex-wrap align-center justify-end openingDetails_fd0_0_c0'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout">
        <view class='flex flex-wrap align-center openingDetails_fd1_0'>
          <text class='openingDetails_fd1_0_c0'>会员类型</text>
          <text class='openingDetails_fd1_0_c1'>{{memberlabel}}</text>
          <!-- <text class='openingDetails_fd1_0_c2'>{{membervalue}}</text>
          <text class='openingDetails_fd1_0_c2'>个月</text> -->
        </view>
        <view class='flex flex-wrap align-center openingDetails_fd1_0'>
          <text class='openingDetails_fd1_0_c0'>价格</text>
          <text class='openingDetails_fd1_1_c1'>￥</text>
          <text class=' openingDetails_fd1_1_c2'>
            <text class=' openingDetails_price1_fd1_1_c2'>{{ price | frontPrice }}</text>
            <text class=' openingDetails_price1_fd1_1_c2'>{{ price | laterPrice }}</text>
          </text>
        </view>
        <view class='flex flex-wrap align-center openingDetails_fd1_2'>
        </view>
        <text class='openingDetails_fd1_3'>服务范围</text>
        <view class='flex flex-wrap openingDetails_fd1_4'>
          <textarea class='flex openingDetails_input_fd1_4' :placeholder="'服务范围为内容内容'" :maxlength="240"
            placeholder-style="color:rgba(102, 102, 102, 1);font-size:28rpx" v-model="notice" />

        </view>
      </view>

      <!---flex布局flex布局结束-->
      <view class="flex flex-wrap align-center benben-position-layout flex openingDetails_flex_2">
        <text class='openingDetails_fd2_0'>共计：</text>
        <text class='openingDetails_fd2_1'>￥</text>
        <text class='openingDetails_fd2_2'>{{price}}</text>
        <button class='openingDetails_fd2_3' @tap.stop="goPay" data-type="navigateTo"
          :data-url="`/pages/my/buySuccess/buySuccess`">购买</button>

      </view>
      <view :style="{height: '100rpx'}"></view>
      <view class="flex flex-wrap align-center justify-center benben-position-layout flex openingDetails_flex_3">
        <benben-flex-switch-new class-name='flex flex openingDetails_fd3_0' v-model="useRule" :disabled='false'
          :auto='true'>
          <template v-slot:checked>

            <view class='flex flex position-relative align-center'>
              <image class='openingDetails_checkfd3_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"44.png"'></image>
            </view>

          </template>
          <template v-slot:unchecked>

            <view class='flex flex position-relative justify-end align-center'>
              <image class='openingDetails_noCheckfd3_0_c1_c0' mode="aspectFit" :src='STATIC_URL+"43.png"'></image>
            </view>

          </template>
        </benben-flex-switch-new>
        <text class='openingDetails_fd3_1'>我已阅读并同意会员</text>
        <text class='openingDetails_fd3_2' @tap.stop="handleJumpDiy" data-type="navigateTo"
          :data-url="`/pages/my/memberNotice/memberNotice?rule=1`">使用规则</text>

      </view>
      <view :style="{height: '88rpx'}"></view>


    </view>
  </view>
</template>
<script>
  export default {
    components: {},


    data() {
      return {
        "fd1_4": "",
        "useRule": false,
        "grade": "",
        "day": "",
        "price": "",
        "id": "",
        membervalue: '',
        memberlabel: '',
        notice: ''
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },

    },
    watch: {},
    onLoad(options) {
      let {
        grade,
        day,
        price,
        id,
        membervalue,
        memberlabel,
        notice
      } = options
      if (grade !== undefined) this.grade = grade
      if (day !== undefined) this.day = day
      if (price !== undefined) this.price = price
      if (membervalue !== undefined) this.membervalue = membervalue
      if (memberlabel !== undefined) this.memberlabel = memberlabel
      if (notice !== undefined) this.notice = notice
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {

    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {

      goPay() {
        if (!this.useRule) {
          this.$message.info('请勾选协议')
          return;
        }
        this.$api.post(global.apiUrls.post62c803a711123, {
          order_type: '16',
          product_id: this.membervalue,
          payable_money: this.price
        }).then(res => {
          if (res.data.code == 1) {
            this.paySuccess(res.data.data.order_sn)
          } else {
            this.$message.info(res.data.msg)
          }
        })

      },
      paySuccess(order_sn) {
        this.$api.post(global.apiUrls.post62e335233b477, {
          order_config_id: '13',
          wxpaytype: 'MiniPay',
          order_sn: order_sn
        }).then(res => {
          if (res.data.code == 1) {
            const payInfo=res.data.data
            uni.requestPayment({
              provider: 'wxpay',
              timeStamp: payInfo.timeStamp,
              nonceStr:payInfo.nonceStr,
              package: payInfo.package,
              signType: payInfo.signType,
              paySign: payInfo.paySign,
              success: function(res) {
                uni.redirectTo({
                  url: `/pages/my/buySuccess/buySuccess`
                })
              },
              fail: function(err) {
                console.log('fail:' + JSON.stringify(err));
              }
            });

          } else {
            this.$message.info(res.data.msg)
          }
        })
      },
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: url(https://api.nongjugongxiang.com/nongju/images/36.png) no-repeat, #FFFFFF;
    background-size: 100% auto;
  }

  .openingDetails_flex_0 {
    background: url(https://api.nongjugongxiang.com/nongju/images/36.png) no-repeat;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .openingDetails_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 500;
    color: #333;
    line-height: 88rpx;
  }

  .openingDetails_fd0_0_c0_c0 {
    font-size: 36rpx;
    color: #333;
  }

  .openingDetails_fd0_0_c0 {
    width: 120rpx;
  }

  .openingDetails_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .openingDetails_input_fd1_4 {
    width: 100%;
    height: 140rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #333;
    white-space: pre-wrap;
  }

  .openingDetails_fd1_4 {
    width: 650rpx;
    margin: 0rpx 32rpx 0rpx 32rpx;
  }

  .openingDetails_fd1_3 {
    margin: 32rpx 0rpx 16rpx 32rpx;
    color: #333333;
    font-size: 28rpx;
    font-weight: 500;
  }

  .openingDetails_fd1_2 {
    background: #F8F8F8;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    width: 750rpx;
    height: 16rpx;
  }

  .openingDetails_price1_fd1_1_c2 {
    font-size: 36rpx;
    color: rgba(230, 56, 56, 1);
    font-weight: 700;
  }

  .openingDetails_fd1_1_c2 {
    color: #ff5536;
    font-weight: 600;
  }

  .openingDetails_fd1_1_c1 {
    border-bottom: 1px solid #eee;
    margin: 0rpx 8rpx 0rpx auto;
    color: rgba(230, 56, 56, 1);
    font-size: 24rpx;
    font-weight: 400;
    padding: 32rpx 0rpx 32rpx 0rpx;
  }

  .openingDetails_fd1_0_c2 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 400;
  }

  .openingDetails_fd1_0_c1 {
    border-bottom: 1px solid #eee;
    margin: 0rpx 8rpx 0rpx auto;
    color: #333333;
    font-size: 28rpx;
    font-weight: 400;
    padding: 32rpx 0rpx 32rpx 0rpx;
  }

  .openingDetails_fd1_0_c0 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 500;
  }

  .openingDetails_fd1_0 {
    margin: 0rpx 32rpx 0rpx 32rpx;
  }

  .openingDetails_flex_2 {
    background: var(--benbenbgColor1);
    width: 750rpx;
    height: 100rpx;
    overflow: hidden;
    z-index: 10;
    background-size: 100% auto;
    bottom: calc(0rpx + var(--window-bottom));
  }

  .openingDetails_fd2_3 {
    background: #E63838;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    width: 258rpx;
    line-height: 80rpx;
    font-size: 32rpx;
    color: #fff;
    height: 80rpx;
    margin: -12rpx 32rpx 0rpx auto;
  }

  .openingDetails_fd2_2 {
    color: rgba(230, 56, 56, 1);
    font-size: 36rpx;
    font-weight: 700;
  }

  .openingDetails_fd2_1 {
    color: rgba(230, 56, 56, 1);
    font-size: 24rpx;
    font-weight: 700;
  }

  .openingDetails_fd2_0 {
    margin: 0rpx 0rpx 0rpx 32rpx;
    color: #999999;
    font-size: 24rpx;
    font-weight: 400;
  }

  .openingDetails_flex_3 {
    background: var(--benbenbgColor1);
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    bottom: calc(100rpx + var(--window-bottom));
    background-size: 100% auto;
  }

  .openingDetails_fd3_2 {
    color: rgba(230, 56, 56, 1);
    font-size: 24rpx;
    font-weight: 400;
  }

  .openingDetails_fd3_1 {
    color: rgba(153, 153, 153, 1);
    font-size: 24rpx;
    font-weight: 400;
    margin: 0rpx 8rpx 0rpx 0rpx;
  }

  .openingDetails_noCheckfd3_0_c1_c0 {
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    width: 32rpx;
    height: 32rpx;
  }

  .openingDetails_checkfd3_0_c0_c0 {
    width: 32rpx;
    height: 32rpx;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
  }

  ::v-deep .openingDetails_fd3_0 {
    margin: 0rpx 13rpx 0rpx 0rpx;
  }
</style>
